import { Tabs } from "antd";
import { LayerStructure } from "@/components/Configuration/FileProps/LayerStructure.tsx";
import React, { useEffect, useState } from "react";
import { Appearance } from "@/components/Configuration/PenProps/Appearance.tsx";
import { PenMainProps } from "@/types";
import { Pen } from "@meta2d/core";
import { PenEvents } from "@/components/Configuration/PenProps/PenEvents.tsx";
import { PenAnimation } from "@/components/Configuration/PenProps/PenAnimation.tsx";
import { PenDataTag } from "@/components/Configuration/PenProps/PenDataTag.tsx";
import { ScrollChildren } from "@/components/Configuration/ScrollChildren.tsx";

function PenProps(props: PenMainProps) {
  const [penOptions, setPenOptions] = useState<Pen>({});
  const setPen = () => {
    if (window.meta2d.store.active && window.meta2d.store.active?.length > 1)
      return;
    let activePen = window.meta2d.store.active
      ? window.meta2d.store.active[0]
      : props.activePens[0];
    let rect = window.meta2d.getPenRect(activePen);
    setPenOptions(() => ({
      ...activePen,
      ...rect,
    }));
  };
  let timer: any = null;
  useEffect(() => {
    let triggerEvent = ["update", "valueUpdate"];
    window.meta2d.on("*", (type, _event) => {
      if (triggerEvent.includes(typeof type === "string" ? type : "")) {
        if (timer) {
          return;
        }
        timer = setTimeout(() => {
          setPen();
          clearTimeout(timer);
          timer = null;
        }, 200);
      }
    });
    return () => {
      window.meta2d.off("*", () => {});
    };
  }, []);
  useEffect(() => {
    setPen();
  }, [props.activePens]);
  const setPenValue = (key: keyof Pen, value: any) => {
    window.meta2d.setValue({
      id: penOptions.id,
      [key]: value,
    });

    setPenOptions(() => ({
      ...penOptions,
      [key]: value,
    }));
  };
  const penChildProps = {
    penOptions,
    setPenValue,
  };
  return (
    <>
      <Tabs
        animated
        size={"small"}
        tabBarGutter={20}
        centered
        onChange={(key) => {
          sessionStorage.setItem("PenPropsKey", key);
        }}
        defaultActiveKey={sessionStorage.getItem("PenPropsKey") || "appearance"}
        items={[
          {
            key: "appearance",
            label: "外观",
            children: (
              <ScrollChildren>
                <Appearance {...penChildProps} />
              </ScrollChildren>
            ),
          },
          {
            key: "event",
            label: "事件",
            children: (
              <ScrollChildren>
                <PenEvents {...penChildProps} />
              </ScrollChildren>
            ),
          },
          {
            key: "Animation",
            label: "动效",
            children: (
              <ScrollChildren>
                <PenAnimation {...penChildProps} />
              </ScrollChildren>
            ),
          },
          {
            key: "data",
            label: "数据",
            children: (
              <ScrollChildren>
                {" "}
                <PenDataTag {...penChildProps} />
              </ScrollChildren>
            ),
          },
          {
            key: "LayerStructure",
            label: "结构",
            children: (
              <ScrollChildren>
                <LayerStructure {...props} />
              </ScrollChildren>
            ),
          },
        ]}
      />
    </>
  );
}

export default React.memo(PenProps);
